<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <!--导入jquery-ui-->
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link type="text/css" href="../js/jquery-ui.min.css" rel="stylesheet">
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #search {
        width: 40%;
        height: 7ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 0.7ex;
        border-style: solid;
        text-align: center;
        color: #eaac00;
        position: absolute;
        display: inline-block;
        top: 1ex;
        left: 57ex;
    }

    #search input {
        float: left;
        position: absolute;
        border-width: .3ex .3ex .3ex .3ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        color: #eaac00;
        height: 3ex;
        font-size: 3ex;
    }
    #search span{
        display: inline-block;
        float: left;
        position: absolute;
        font-size: 3ex;
    }
</style>
<body>
<div id="content">
    <div id="search">
        <div id="searchContent">
<!--                            <span style="left: 1ex;top: 1ex ">category:</span>-->
<!--                            <input  style="left: 9.5ex;top: 0.8ex;width: 2ex" type="radio" name="select" id="category"/>-->
<!--                            <span style="left: 13ex;top: 1ex">product:</span>-->
<!--                            <input style="left: 20ex;top: 0.9ex;width: 2.1ex"type="radio" name="select" id="product"/>-->
<!--                            &lt;!&ndash;开启自动补全功能autocomplete="on"&ndash;&gt;-->
<!--                            <input  style="left: 25ex;top: 0.6ex;width: 18ex" id="searchText" type="text" name="keyword" size="14" />-->
<!--                            <input style="left: 44ex;top: 1ex;width: 7ex"  type="button" name="searchProducts" value="Search" id="searchSubmit"/>-->
<!--            搜索-->
            <form action="" method="post" id="keyForm">
                <!--右侧搜索选择复选框-->
                <span style="left: 1ex;top: 1ex ">category:</span>
                <input style="left: 9.5ex;top: 0.8ex;width: 2ex" type="radio" name="select" id="category"/>
                <span style="left: 13ex;top: 1ex">product:</span>
                <input style="left: 20ex;top: 0.9ex;width: 2.1ex" type="radio" name="select" id="product" checked="checked"/>
                <!--开启自动补全功能autocomplete="on"-->
                <input  style="left: 25ex;top: 0.6ex;width: 18ex" id="searchtext" type="text" name="keyword" size="14" />
                <input style="left: 44ex;top: 1ex;width: 7ex" type="button" name="searchProducts" value="Search" id="searchsubmit"/>
            </form>
        </div>
    </div>
    <script>
        $(function (){
            //对搜索输入框的键盘按下后的事件进行监听keyup
            $('#searchtext').on("keyup",function (){
                console.log("监听");
                let datas={"word":$('#searchtext').val()};
                if(document.getElementById("category").checked){
                    $.get('/manage/presearchCategory?keyword='+document.getElementById("searchtext").textContent,function (data) {
                        console.log("888888888888");
                        //创建数组用于存放获取的产品的名字
                        var searchResult=new Array();
                        for(var i=0;i<data.length;i++){
                            searchResult[i]=data[i].name;
                        }
                        //console.log(searchResult);
                        //将产品名显示在UI控件中
                        $('#searchtext').autocomplete({
                            source:searchResult
                        });
                    })
                    console.log("选中category");
                }else{
                    console.log("未选择");
                    let datas={"word":$('#searchtext').val()};
                    $.get('/manage/presearchProduct?keyword='+document.getElementById("searchtext").textContent,function (data) {
                        console.log("77777777");
                        //创建数组用于存放获取的产品的名字
                        var searchResult=new Array();
                        for(var i=0;i<data.length;i++){
                            searchResult[i]=data[i].name;
                        }
                        //console.log(searchResult);
                        //将产品名显示在UI控件中
                        $('#searchtext').autocomplete({
                            source:searchResult
                        });
                    })
                }
            });
            $('#searchsubmit').on('click',function (e) {
                e.preventDefault();
                console.log("点击搜索按钮");
                let datas = $('#keyForm').serialize();
                if(document.getElementById("category").checked){
                    $.post('/manage/searchCategory',datas,function (data){
                        if(data.code === 11)
                        {
                            console.log("搜索成功");
                            location.href = data.msg;
                        }
                    });
                }else{
                    console.log("product");
                    $.post('/manage/searchProductlist',datas,function (data){
                        if(data.code === 11)
                        {
                            console.log("搜索成功");
                            location.href = data.msg;
                        }
                    });
                }
            });
        });
    </script>
</div>
</body>
</html>